<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>治愈系温馨弹窗</title>
    <style>
        /* 精致弹窗主体 */
        .cute-window {
            position: fixed;
            width: 220px;
            border: none;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
            background: white;
            z-index: 9999;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .cute-window:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        /* 柔和标题栏 */
        .cute-titlebar {
            height: 32px;
            line-height: 32px;
            background: linear-gradient(135deg, #fdf2f8, #fef7fb);
            color: #2d3748;
            padding: 0 12px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0e6eb;
        }
        /* 可爱图标 */
        .cute-icon {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ed8936'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17h2v-2h-2v2zm0-4h2V7h-2v8z'/%3E%3C/svg%3E") no-repeat center;
        }
        /* 内容区样式 */
        .cute-content {
            padding: 20px 15px;
            font-size: 15px;
            color: #4a5568;
            line-height: 1.6;
            text-align: center;
            background: linear-gradient(to bottom, white, #faf6fa);
        }
        /* 随机柔和背景色变体 */
        .cute-window.v1 .cute-titlebar { background: linear-gradient(135deg, #e8f4f8, #f0f8fb); }
        .cute-window.v1 .cute-content { background: linear-gradient(to bottom, white, #f5fafe); }
        .cute-window.v2 .cute-titlebar { background: linear-gradient(135deg, #f5f5f5, #f8f8f8); }
        .cute-window.v2 .cute-content { background: linear-gradient(to bottom, white, #fafafa); }
        .cute-window.v3 .cute-titlebar { background: linear-gradient(135deg, #fcf1f7, #faf0f5); }
        .cute-window.v3 .cute-content { background: linear-gradient(to bottom, white, #fdf2f8); }
        
        body {
            margin: 0;
            padding: 0;
            background: #f9fafb;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
    </style>
</head>
<body>
    <script>
        // 120+条治愈系提示语
        const tips = [
            '多喝水哦~ 身体棒棒', '保持微笑，好运会来', '每天都要元气满满呀',
            '记得吃水果，补充维C', '保持好心情，万事顺意', '好好爱自己，才是浪漫的开始',
            '愿你梦想成真，闪闪发光', '期待下一次见面，满心欢喜', '金榜题名，前程似锦',
            '顺顺利利，无灾无难', '早点休息，别熬坏眼睛', '愿所有烦恼都烟消云散',
            '别熬夜啦，梦里有星星', '今天过得开心嘛？要快乐呀', '天冷了，多穿件衣服呀',
            '要相信自己，你超棒的', '一切都会好起来的，慢慢来', '好好享受此刻，岁月静好',
            '别忘了吃早餐，补充能量', '给自己一个拥抱，你辛苦了', '今天也要加油，冲鸭',
            '保持热爱，奔赴山海', '你真的很棒哦，要自信', '偶尔偷懒也没关系，放松一下',
            '去看看窗外的风景吧，很治愈', '记得给生活加点甜，比如吃块糖', '好好照顾自己，按时吃饭',
            '别忘记你的小目标，慢慢实现', '勇敢一点，没什么大不了的', '享受独处的时光，与自己对话',
            '今天的你也很可爱，要开心', '别给自己太大压力，尽力就好', '做自己喜欢的事，超幸福',
            '保持好奇，探索世界的美好', '好好吃饭，好好睡觉，好好生活', '你值得被温柔对待，被世界偏爱',
            '每天进步一点点，日积月累会很棒', '别吝啬你的赞美，温暖他人', '听听喜欢的音乐吧，治愈心灵',
            '给朋友发个消息吧，聊聊近况', '记得整理你的小窝，整洁舒心', '偶尔犯点小错也没事，下次改正',
            '保持童心，永远有趣不无聊', '相信时间的力量，会带来答案', '你比你想象的更坚强，别放弃',
            '好好规划你的一天，充实又快乐', '别错过身边的小美好，用心发现', '给自己买个小礼物吧，奖励自己',
            '学会和自己和解，接纳不完美', '保持耐心，静待花开，终有收获', '今天的风也很温柔，轻拂脸颊',
            '阳光总会照亮你，驱散阴霾', '别让焦虑消耗自己，放松心态', '做个温柔又有力量的人',
            '记得抬头看看星星，很浪漫', '生活需要一点仪式感，增添乐趣', '努力但不内耗，劳逸结合',
            '你是独一无二的，无可替代', '慢慢来，会更好，别急呀', '别忘记初心呀，方得始终',
            '累了就歇一歇，养足精神再出发', '保持善良，终有回报，温暖相伴', '今天也要好好生活，不负时光',
            '去吃点喜欢的美食吧，满足味蕾', '和喜欢的人多说说话，甜蜜幸福', '别太在意别人的眼光，做自己',
            '给自己放个小假，好好放松', '相信美好即将发生，满怀期待', '你的努力不会白费，终有回报',
            '保持积极，万事顺意，好运连连', '偶尔也要任性一次，追随心意', '好好对待身边的人，珍惜相遇',
            '记得补充维生素，身体棒棒', '别久坐，多活动活动筋骨', '生活处处有惊喜，用心感受',
            '你笑起来真好看，要多笑呀', '别让遗憾留在心里，勇敢追求', '勇敢追求想要的生活，不将就',
            '保持专注，效率更高，事半功倍', '给自己一点鼓励，你可以的', '今天的云也很可爱，像棉花糖',
            '学会感恩，心怀温暖，传递善意', '别拖延，现在就做，拒绝内耗', '你真的超厉害，为你骄傲',
            '享受当下的每一刻，不留遗憾', '别让情绪左右你，做情绪的主人', '做自己的太阳，无需借谁的光',
            '记得给植物浇水呀，它们也在生长', '偶尔看看老照片，回忆很美好', '生活需要松弛感，别太紧绷',
            '你的坚持终将有结果，别放弃', '别害怕改变，会有新的可能', '保持真诚，不负遇见，珍惜缘分',
            '今天也要元气满满呀，活力四射', '别忘记吃午饭，吃饱才有力气', '天冷加衣，天热防暑，照顾好自己',
            '和大自然多亲近，呼吸新鲜空气', '保持谦逊，持续成长，越来越棒', '你值得所有美好，别怀疑',
            '别给自己设限，勇敢尝试新事物', '勇敢表达爱意，别藏在心里', '生活因你而精彩，闪闪发光',
            '记得好好刷牙，保护牙齿健康', '偶尔发呆也很治愈，放空自己', '相信自己，你可以的，别退缩',
            '别太紧绷，放松一点，会更快乐', '今天的咖啡有点香，提神醒脑', '你的存在很有意义，独一无二',
            '保持整洁，心情舒畅，做事高效', '别错过落日余晖，超美的风景', '努力成为更好的自己，不负韶华',
            '雨天记得带伞，别淋湿啦', '夏天记得防晒，保护皮肤', '秋天记得添衣，别着凉',
            '冬天记得保暖，温暖过冬', '看书是件很美好的事，静心阅读', '运动一下吧，强身健体',
            '偶尔听首老歌，回忆涌上心头', '和家人聊聊天，感受温暖', '帮别人一个小忙，收获快乐',
            '记录生活的美好，留作纪念', '别太急躁，慢慢来，会更稳', '你笑起来像太阳，温暖他人',
            '愿你被世界温柔以待，平安喜乐', '每天都有小幸运，惊喜不断', '保持乐观，困难都会过去',
            '别让生活磨平了你的棱角，保持个性', '做个有趣的人，生活更精彩', '偶尔吃点甜食，心情变好'
        ];

        // 窗口标题列表
        const windowTitles = [
            '温馨提示', '生活小确幸', '元气加油站', '暖心寄语',
            '日常小提醒', '美好祝愿', '给自己的话', '治愈瞬间',
            '快乐小碎片', '温柔寄语', '幸运提示', '生活小美好'
        ];

        // 窗口样式变体（3种风格随机切换）
        const windowVariants = ['v1', 'v2', 'v3'];

        // 创建精致治愈系弹窗
        function createCuteWindow() {
            const tip = tips[Math.floor(Math.random() * tips.length)];
            const windowTitle = windowTitles[Math.floor(Math.random() * windowTitles.length)];
            const variant = windowVariants[Math.floor(Math.random() * windowVariants.length)];
            
            // 随机窗口大小（更协调的范围）
            const windowWidth = 200 + Math.random() * 50;
            const windowHeight = 110 + Math.random() * 40;
            
            // 随机位置（避免贴边，更美观）
            const x = Math.random() * (window.innerWidth - windowWidth - 20) + 10;
            const y = Math.random() * (window.innerHeight - windowHeight - 20) + 10;
            
            // 创建窗口元素
            const cuteWindow = document.createElement('div');
            cuteWindow.className = `cute-window ${variant}`;
            cuteWindow.style.width = `${windowWidth}px`;
            cuteWindow.style.height = `${windowHeight}px`;
            cuteWindow.style.left = `${x}px`;
            cuteWindow.style.top = `${y}px`;
            
            // 窗口结构
            cuteWindow.innerHTML = `
                <div class="cute-titlebar">
                    <div class="cute-icon"></div>
                    <span>${windowTitle}</span>
                </div>
                <div class="cute-content">${tip}</div>
            `;
            
            document.body.appendChild(cuteWindow);
            
            // 30秒后淡出移除
            setTimeout(() => {
                cuteWindow.style.opacity = '0';
                cuteWindow.style.transform = 'translateY(10px)';
                cuteWindow.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                setTimeout(() => cuteWindow.remove(), 600);
            }, 30000);
        }

        // 250毫秒间隔，弹出更密集
        setInterval(createCuteWindow, 250);
    </script>
</body>
</html>